<template>
  <!-- 标签页 -->
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="全部评价" name="first">
      <!-- 标签内容布局 -->
      <div class="common-layout">
        <el-container>
          <el-header>
            <div class="leftboxxy">
              <el-button type="info">全部商品</el-button>
            </div>
            <div class="searchbox">
              <el-input
                v-model="input"
                placeholder="请输入搜索内容"
                clearable
              />
              <el-button type="primary" size="small">搜索</el-button>
            </div>
          </el-header>
          <el-main>
            <el-row :gutter="0">
              <el-col :span="4"
                ><div class="grid-content bg-purple">用户</div></el-col
              >
              <el-col :span="4"
                ><div class="grid-content bg-purple">评价</div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content bg-purple textrightxy">
                  回复
                </div></el-col
              >
              <el-col :span="4"
                ><div class="grid-content bg-purple toprightxy">
                  按照最新排序
                </div></el-col
              >
            </el-row>
            <div class="dataxy">
              <el-scrollbar max-height="600px" v-if="goodsNames.length">
                <div v-for="item in 3" :key="item" class="scrollbar-demo-item">
                  <div class="dataleftxy">
                    <el-row :gutter="20">
                      <el-col :span="5"
                        ><div class="grid-content bg-purple">
                          156****1234
                        </div></el-col
                      >
                      <el-col :span="4"
                        ><div class="grid-content bg-purple">
                          <el-icon v-for="item in 5" :key="item" :size="16"
                            ><star
                          /></el-icon></div
                      ></el-col>
                      <el-col :span="4"
                        ><div class="grid-content bg-purple">
                          <el-icon :size="16"><circle-check /></el-icon>好评
                          <el-icon :size="16"><circle-close /></el-icon>差评
                        </div></el-col
                      >
                    </el-row>
                    <el-row :gutter="20" class="textxy">
                      <el-col :span="12" :offset="5"
                        ><div class="grid-content bg-purple">
                          质量一般，没想象的这么好
                        </div></el-col
                      >
                      <el-col :span="6"
                        ><div class="grid-content bg-purple">
                          <span
                            ><el-icon :size="16"><circle-check /></el-icon>
                            0</span
                          >
                          <span>2021-01-01</span>
                        </div></el-col
                      >
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="16"
                        ><div class="grid-content bg-purple gooditsxy">
                          <div>商品图片</div>
                          <div>
                            {{ goodsNames[item].goodsName }}
                          </div>
                        </div></el-col
                      >
                    </el-row>
                  </div>
                  <div class="datarightxy">
                    <el-input
                      type="textarea"
                      v-model="textarea"
                      placeholder="(请输入回复)"
                    />
                    <span>
                      <span>
                        <el-icon :size="25"><paperclip /></el-icon>
                        <el-icon :size="25"><picture-rounded /></el-icon>
                      </span>
                      <el-button round @click="btn1xy">回复</el-button>
                    </span>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-main>
        </el-container>
      </div>
    </el-tab-pane>
    <el-tab-pane label="好评" name="second">这里是好评</el-tab-pane>
    <el-tab-pane label="差评" name="third">这里是差评</el-tab-pane>
    <el-tab-pane label="待评价" name="fourth">这里是待评价</el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  ElTabs,
  ElTabPane,
  ElContainer,
  ElHeader,
  ElMain,
  ElInput,
  ElButton,
  ElCol,
  ElRow,
  ElScrollbar,
  ElIcon,
} from "element-plus";
import {
  PictureRounded,
  Paperclip,
  Star,
  CircleCheck,
  CircleClose,
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";

import Mock from "mockjs";
export default {
  setup() {
    const activeName = ref("first");
    const input = ref("");
    const textarea = ref("");
    const goodsNames = ref([]);

    onMounted(() => {
      let data = Mock.mock({
        "data|20": [
          {
            goodsName: "@ctitle(10)",
          },
        ],
      });
      goodsNames.value = data.data;
      console.log(goodsNames.value);
    });

    return {
      activeName,
      input,
      textarea,
      goodsNames,
    };
  },
  components: {
    ElTabs,
    ElTabPane,
    ElContainer,
    ElHeader,
    ElMain,
    ElInput,
    ElButton,
    ElCol,
    ElRow,
    ElScrollbar,
    PictureRounded,
    ElIcon,
    Paperclip,
    Star,
    CircleCheck,
    CircleClose,
  },
  methods: {
    btn1xy() {
      console.log(123);
    },
  },
};
</script>

<style lang="less" scoped>

// 头上标签的css
.demo-tabs > .el-tabs__content {
  padding: 32px;
  background-color: #f4f5f7;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/deep/.el-tabs__nav{
  width: 100%;
}
/deep/.el-tabs__active-bar{
  display: none;
}
/deep/.el-tabs__item{
  width: 10%;
  text-align: center;
  padding: 0;
  font-size: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
/deep/.is-active{
  background:#fff
}
/deep/#tab-first{
  margin-left: 80px;
}
/deep/.el-tabs__content{
  background: #fff;
}
/deep/.el-tabs__header{
  margin: 0;
}
/deep/.el-tabs__nav-wrap::after{
  display: none;
}
/deep/.el-tabs__content{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
// 内容上部分的样式
/deep/.el-tab-pane{
  width: 100%;
  padding: 0 40px;
}
.common-layout .el-header{
  background-color: #fff;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.common-layout .el-main {
  background-color: #fff;
  color: var(--el-text-color-primary);
  text-align: center;
  padding: 0;
  line-height: 160px;
}
/deep/.el-input__inner{
  height:25px
}
.searchbox{
  display: flex;
  align-items: center;
  height: 100%;
  width: 20%;
  .el-button{
    height: 25px;
  }
}
.leftboxxy .el-button{
    height: 25px;
    background: #e9eef3;
    color: #6b778c;
    border: none;
    font-size:12px;
    margin-left:50px
  }
//main下部分样式
.grid-content{
  background: #f2f2f2;
  height: 30px;
  line-height: 30px;
}
.textrightxy{
  text-align: right;
  padding-right: 20px ;
}
.toprightxy{
  padding-right: 20px;
  text-align: right;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 70px 20px 40px;
  height: 200px;
  margin-top: 20px;
  border-radius: 4px;
  border-bottom: 4px solid #f2f2f2;
}
.datarightxy{
  width: 35%;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
/deep/.el-textarea__inner{
  border: none;
  background: #f2f2f2;
  padding: 20px;
  height: 140px;
  resize:none;
}
.datarightxy>span{
  height: 40px;
  line-height: 20px;
  display: flex;
  justify-content: right;
  align-items: center;
}
.datarightxy>span>span{
  display: flex;
  justify-content: center;
  align-items: center;
}
.datarightxy>span button{
  color: blue;
  height: 25px;
  width: 70px;
  font-size:12px;
  margin-right: 20px;
}
.dataleftxy{
  width: 65%;
  height: 100%;
}
.datarightxy>span>span .el-icon{
  margin-right: 10px;
}
// 下边样式左边的
.dataleftxy{
  .el-row {
  height:25%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.textxy{
    height:50%;
    .grid-content:nth-of-type(1){
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .el-col:nth-of-type(2) .grid-content{
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }
    .el-col:nth-of-type(2) .grid-content span:nth-of-type(1){
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

.bg-purple {
  background: #fff;
  height:100%;
}
.gooditsxy{
    justify-content: space-around;
    align-items: center;
    background: #f2f2f2;

  }
  .gooditsxy>div:nth-of-type(1){
    width: 30%;
  }
  .gooditsxy>div:nth-of-type(2){
    width: 70%;
    text-align: left;
  }
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
}
</style>
